// import { createStore } from 'vuex' // new Store

import { createStore } from '../vuex' // new Store

function customPlugin(store) {
    let local = localStorage.getItem('VUEX:STATE');

    // 刷新页面，如果本地存有vuex的值，那就赋值到vuex中
    if (local) {
        store.replaceState(JSON.parse(local))
    }
    // vuex监听state状态的发布订阅模式，每当state状态发生变化时，就执行_subscribez中的函数
    store.subscribe((mutation, state) => {
        // mutation中有当前mutions的信息，调用的是那个模块的中的mutions，和传入的参数，可以用来判断是否执行下面的函数
        console.log(mutation,'mutation');
        // 每当状态发生变化 （调用了mutation的时候 ），就会自动更新本地存的vuex数据
        localStorage.setItem('VUEX:STATE', JSON.stringify(state))
    })
}

// debugger
const store = createStore({
     // 会按照注册的顺序依次执行插件,执行的时候会把store传递给你
    plugins: [
        // 插件，刷新页面保存vuex的数据状态
        // customPlugin
    ],
    strict: true, // 开启严格模式， 不允许用户非法操作状态 （只能在mutation中修改状态，否则就会发生异常）
    state: { // 组件中的data
        count: 0,
        name:'顶层'
    },
    getters: { // 计算属性 vuex4 他并没有实现计算属性的功能
        double(state) {
            console.log('getters');
            return state.count + 1
        }
    },
    mutations: { // 可以更改状态 必须是同步更改的
        add(state, payload) {
            console.log(payload,'payload');
            // setTimeout(() => {
                state.count += payload
            // }, 1000)
            
        }
    },
    actions: { // 可以调用其他action，或者调用mutation
        asyncAdd({ commit }, payload) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('add', payload);
                    resolve()
                }, 1000)
            })
        }
    },
    modules: { // 子模块 实现逻辑的拆分 
        aCount: {
            namespaced: true,
            state: { count: 0,name:'aCount' },
            getters: { // 计算属性 vuex4 他并没有实现计算属性的功能
                double(state) {
                    return 'aCount'
                }
            },
            mutations: {
                add(state, payload) { // aCount/add
                    state.count += payload
                }
            },
            
            modules: {
                cCount: {
                    // namespaced:true, 
                    state: { count: 0,name:'cCount' },
                    getters: { 
                        // 没有开启命名空间，计算属性相同会报错
                        double(state) {
                            return 'cCount'
                        }
                    },
                    mutations: {
                        // 没有开启命名空间，cCount的mutations的add会放到aCount的mutations的add数组中
                        add(state, payload) { // aCount/cCount
                            state.count += payload
                        }
                    },
                    modules: {
                        fCount: {
                            namespaced:true, 
                            state: { count: 0,name:'fCount' },
                            getters: { 
                                // 没有开启命名空间，计算属性相同会报错
                                double(state) {
                                    return 'cCount'
                                }
                            },
                            mutations: {
                                // 没有开启命名空间，cCount的mutations的add会放到aCount的mutations的add数组中
                                add(state, payload) { // aCount/cCount
                                    state.count += payload
                                }
                            },
                        }
                    }
                }
            }
        },
        bCount: {
            // namespaced: true,
            state: { count: 0,name:'bCount' },
            mutations: {
                add(state, payload) {
                    state.count += payload
                }
            },
            getters: { // 计算属性 vuex4 他并没有实现计算属性的功能
                double(state) {
                    return 'bCount'
                }
            },
            modules: {
                dCount: {
                    namespaced:true,
                    state: { count: 0,name:'dCount' },
                    mutations: {
                        add(state, payload) { // aCount/cCount
                            state.count += payload
                        }
                    },
                    getters: { // 计算属性 vuex4 他并没有实现计算属性的功能
                        double(state) {
                            return 'dCount'
                        }
                    },
                }
            }
        }

    }
})

// 严格模式
// dispatch(action) => commit(mutation) => 修改状态


// 有一个功能 在a页面需要调用一个接口 影响的可能是a数据    b页面也需要调用同一个接口 改的是b数据
// debugger
// 如果是添加嵌套模块，父子关系一定要写好，例如 a/b/c/d， 要向d模块中动态添加模块，根模块a可以不写，但是b、c一定要写，不然会找不到报错
// store.registerModule(['aCount', 'eCount'], {
//     namespaced: true,
//     state: {
//         name:'eCount',
//         count: 100,
//     },
//     mutations: {
//         add(state, payload) {
//             state.count += payload
//         }
//     },
// })
console.log(store);


export default store;